<!DOCTYPE html>
<html>
<head>
    <title>Icons</title>

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
    <div id="example">
    <div id="icons">
        <div class="k-block k-info">
            <div class="k-header">Normal icons, prefixed with .k-i-</div>
            <ul>
                <li>
                    <a class="k-button"><span class="k-icon k-i-arrow-n"></span></a>
                    arrow-n
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-arrow-e"></span></a>
                    arrow-e
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-arrow-s"></span></a>
                    arrow-s
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-arrow-w"></span></a>
                    arrow-w
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-seek-n"></span></a>
                    seek-n
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-seek-e"></span></a>
                    seek-e
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-seek-s"></span></a>
                    seek-s
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-seek-w"></span></a>
                    seek-w
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-arrowhead-n"></span></a>
                    arrowhead-n
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-arrowhead-e"></span></a>
                    arrowhead-e
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-arrowhead-s"></span></a>
                    arrowhead-s
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-arrowhead-w"></span></a>
                    arrowhead-w
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-expand"></span></a>
                    expand
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-collapse"></span></a>
                    collapse
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-expand-w"></span></a>
                    expand-w
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-collapse-w"></span></a>
                    collapse-w
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-plus"></span></a>
                    plus
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-tick"></span></a>
                    tick
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-close"></span></a>
                    close
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-pencil"></span></a>
                    pencil
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-cancel"></span></a>
                    cancel
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-funnel"></span></a>
                    funnel
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-funnel-clear"></span></a>
                    funnel-clear
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-calendar"></span></a>
                    calendar
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-clock"></span></a>
                    clock
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-search"></span></a>
                    search
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-refresh"></span></a>
                    refresh
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-restore"></span></a>
                    restore
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-maximize"></span></a>
                    maximize
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-minimize"></span></a>
                    minimize
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-custom"></span></a>
                    custom
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-insert-n"></span></a>
                    insert-n
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-insert-m"></span></a>
                    insert-m
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-insert-s"></span></a>
                    insert-s
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-note"></span></a>
                    note
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-folder-add"></span></a>
                    folder-add
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-i-folder-up"></span></a>
                    folder-up
                </li>
            </ul>
        </div><br />
        <div class="k-block k-info">
            <div class="k-header">Small icons, prefixed with .k-si-</div>
            <ul>
                <li>
                    <a class="k-button"><span class="k-icon k-si-arrow-n"></span></a>
                    arrow-n
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-si-arrow-e"></span></a>
                    arrow-e
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-si-arrow-s"></span></a>
                    arrow-s
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-si-arrow-w"></span></a>
                    arrow-w
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-si-tick"></span></a>
                    tick
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-si-refresh"></span></a>
                    refresh
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-si-cancel"></span></a>
                    cancel
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-si-plus"></span></a>
                    plus
                </li>
                <li>
                    <a class="k-button"><span class="k-icon k-si-minus"></span></a>
                    minus
                </li>
            </ul>
        </div>
    </div>
    <style scoped>
        #icons
        {
            margin-left: 20px;
            text-align: center;
        }

        #icons .k-block
        {
            width: 100%;
            height: auto;
            overflow: hidden;
        }

        #icons ul
        {
            margin: 20px auto 0;
            display: block;
            overflow: hidden;
        }

        #icons li
        {
            width: 80px;
            height: 52px;
            margin-right: 10px;
            margin-bottom: 10px;
            list-style: none;
            float: left;
        }

        #icons .k-button
        {
            vertical-align: top;
            width: 28px;
            padding: .1em .4em .3em;
            display: block;
            margin: auto;
        }
    </style>
</div>

</body>
</html>
